<!--
 * @Description: 关于我们页面组件，未完成
 * @Author: hai-27
 * @Date: 2020-02-07 16:23:00
 * @LastEditors: hai-27
 * @LastEditTime: 2020-03-12 19:36:46
 -->
<template>
  <div class="about" id="about" name="about">
    <div class="about-header">
      <div class="about-title">
        <i class="el-icon-tickets" style="color: #ff6700;"></i>
        关于我们
      </div>
    </div>
    <div class="about-content">
      <MyMarkdown> </MyMarkdown>
    </div>

<div class="demo-image__placeholder">
  
  <div class="block">
    <el-image :src="brief.pic" style="width:200px;hight:300px;margin-left:400px">
      <div slot="placeholder" class="image-slot">
        加载中<span class="dot">...</span>
      </div>
    </el-image>
  </div>
     <div style="width:600px;margin:auto">内容详情:<br/>    {{brief.description}}</div>
    <div class="demonstration"  style="width:500px;margin:auto">Tel:{{brief.tel}}</div>
    <div class="demonstration"  style="width:500px;margin:auto">WeChat:{{brief.wechat}}</div>
    <div class="demonstration"  style="width:500px;margin:auto">Address:{{brief.address}}</div>
</div>

        <div class="appliance" id="promo-menu">
          <div class="box-hd">
            <div class="title">师资力量：</div>
            <div class="more" id="more">
            </div>
          </div>
  
        <el-row >
          <el-col style="width:150px;margin-left:20px" :span="8" v-for="(value,key,index) in teacherList" :key="key" :offset="index > 0 ? 4 : 0">
            <el-card :body-style="{ padding: '0px' }">
              <img :src=value.pic class="image">
              <div style="padding: 14px;">
                <span>{{value.name}}</span><br/>
                 <span>{{value.decreption}}</span>
                <div class="bottom clearfix">
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
  </div>
  </div>
</template>
<script>
export default {
    data() {
    return {
        brief:{},
        teacherList:null,
    };
  },
  activated() {
    // 获取简介数据
    this.$axios
      .post("http://localhost:8090/briefIntroduction/userFont/select", {})
      .then(res => {
        console.log(res)
        this.brief = res.data.object;
        console.log(this.brief)
      })
      .catch(err => {
        return Promise.reject(err);
      });
    // 获取师资数据
      this.$axios
      .post("/Teacher/userFont/selectAll", {
        page:1,
        limit:10
      })
      .then(res => {
        console.log(res)
        this.teacherList = res.data.object.list;
        console.log(this.teacherList)
      })
      .catch(err => {
        return Promise.reject(err);
      });
  }
};
</script>
<style scoped>
.about {
  background-color: #f5f5f5;
}
.about .about-header {
  height: 64px;
  background-color: #fff;
  border-bottom: 2px solid #ff6700;
}
.about .about-header .about-title {
  width: 1225px;
  margin: 0 auto;
  height: 64px;
  line-height: 64px;
  font-size: 28px;
}
.about .content {
  padding: 20px 0;
  width: 1225px;
  margin: 0 auto;
}
.about .content .goods-list {
  margin-left: -13.7px;
  overflow: hidden;
}
.about .about-content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
}
</style>
